import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom';
import CategoryTable from './components/categoryTable/CategoryTable.jsx';
import  CategoryAdd from './components/categoryAdd/CategoryAdd.jsx';
import  CategoryEdit from './components/categoryEdit/CategoryEdit.jsx';
import styles from './css/app.module.scss'
//首页组件
import 'antd/dist/antd.css';
import { Layout, Menu} from 'antd';
const { Header, Content, Footer } = Layout;




class App extends React.Component {
  constructor(props){
    super(props)
      this.state={

      }
  }

  render() {
      return  <HashRouter>
          <Layout className="layout" style={{height:"100%",background:"#fff"}}>
              <Header>
                  <Menu
                      theme="dark"
                      mode="horizontal"
                      defaultSelectedKeys={[window.location.hash.split('/')[1]]}
                      style={{ lineHeight: '64px' }}
                  >
                      <Menu.Item key="categoryTable">
                          <Link to="/categoryTable">分类列表</Link>
                      </Menu.Item>
                      <Menu.Item key="categoryAdd">
                          <Link to="/categoryAdd">添加分类</Link>
                      </Menu.Item>
                  </Menu>
              </Header>
              <Content style={{ padding: '0 20px',flex:1 }}>
                  <Route path="/categoryTable" component={CategoryTable}></Route>
                  <Route path="/categoryAdd" component={CategoryAdd}></Route>
                  <Route path="/categoryEdit/:id" component={CategoryEdit}></Route>

              </Content>
              <Footer className={styles.footerName}>
                  传智播客 ©2018 黑马程序员
              </Footer>
          </Layout>
      </HashRouter>

  }
}

export default App;
